<template>
  <div class="webindex">
    <h2>欢迎<template v-if="isLogin">
      <span>{{resident.name}}</span>
    </template>登录社区系统</h2>
    <div class="ad1">
      <a href="https://www.wanmait.com" target="_blank"><img src="http://localhost:8080/static/picture/12333.jpg">
        <p>快来万码学习，必定让你飞起来</p>
      </a>
    </div>
    <div class="ad2">
      <a href="https://www.wanmait.com" target="_blank"><img src="http://localhost:8080/static/picture/12333.jpg">
        <p>广告位招租</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "WebHomeView",
  data(){
    return{
      resident:{
       name:'' ,
      },
      token:'',
      isLogin:false,
    }
  },
  created() {
    this.handleIsLogin()
  },
  methods:{
    handleIsLogin(){
      if (JSON.parse(localStorage.getItem('resident'))!=null){
        this.isLogin=true;
        this.resident=JSON.parse(localStorage.getItem('resident'));
        this.token = localStorage.getItem('webToken');
      }
      else{
        this.isLogin=false;
      }
    }
  }

}
</script>

<style scoped>
    .webindex{
      position: absolute;
      width: 100%;
    }
    /*广告1*/
    .webindex .ad1{
      background-color: antiquewhite;
      width: 250px;
      height: 250px;
      position: relative;
      margin-top: 30px;
      margin-left: 50px;
      border-radius: 20px;
    }
    .webindex .ad1 a{
      text-decoration: none;
      color: #010e1b;
    }
    .webindex .ad1 a img{
      border-radius: 20px;
      margin-top: 10px;
      width: 130px;
      transform: rotate(350deg); /* 旋转15度 */
    }
    .webindex .ad1 a p{
      font-weight: bold;
      font-size: 15px;
    }
    /* 广告2 */
    .webindex .ad2{
      background-color: antiquewhite;
      width: 250px;
      height: 250px;
      position: relative;
      margin-top: 30px;
      margin-left: 300px;
      border-radius: 20px;

    }
    .webindex .ad2 a{
      text-decoration: none;
      color: #010e1b;
    }
    .webindex .ad2 a img{
      border-radius: 20px;
      margin-top: 10px;
      width: 130px;
      transform: rotate(350deg); /* 旋转15度 */
    }
    .webindex .ad2 a p{
      font-weight: bold;
      font-size: 15px;
    }
</style>